<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
	String context = request.getContextPath();
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="<%=context%>/js/ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript"
	src="<%=context%>/js/ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="<%=context%>/js/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css"
	href="<%=context%>/js/ext-3.0.0/resources/css/ext-all.css">
<title>树形结构</title>
<script type="text/javascript">
	var tree;//组织树
	var root;//组织树根
	var addWindow;//新增窗口
	Ext.onReady(function() {
	
		root = new Ext.tree.AsyncTreeNode({
			id : "0",
			text : "国网物资部",
			draggable : false,// 根节点不容许拖动    
			expanded : true,
			leaf:false
		});
	
		var _treeloader = new Ext.tree.TreeLoader({    
             dataUrl : 'initTree?id=0'//这里可以不需要指定URL，在加载前事件响应里面设置    
	    });  
		tree = new Ext.tree.TreePanel({
			renderTo : "hello",
			root : root,
			width : 100,
			loader :_treeloader, // 树加载
			tbar : [
					{text: '添加', handler: addTreeNode}, // tbbutton is the default xtype if not specified
					{text: '删除', handler: delTreeNode} // tbbutton is the default xtype if not specified
				]
		});
		
		// 响应加载前事件，传递node参数    
		tree.on('beforeload', function(node) {
			tree.loader.dataUrl = 'initTree?id=' + node.id; // 定义子节点的Loader    
		});
		tree.on('load', function(node) {
			//树加载完成后执行
		});
		tree.on("append", function(a, b, node) {
			//根据实际情况来判定叶子节点  
		});
		tree.expand(false,true);
		// 渲染树形    
		tree.render();
		//节点的点击时间  
		tree.on('click', function(node, e) {
			//展开或关闭子节点
			node.toggle();
		});
	});
	//删除节点
	function delTreeNode(){
		var node = tree.getSelectionModel().getSelectedNode();
		if(!node){
			alert("请选择需要删除的组织！");
		}else{
			var rootId = root.id;			
			var nodeId = node.id;
			if(rootId == nodeId){
				alert(node.text+"不能删除！");
				return ;
			}else{
				var param = {'orgId':nodeId};
				doPost("deleteOrg",param);
				refreshChildNode(node.parentNode);
			}
		}
		
	}
	//添加节点
	function addTreeNode() {
		var node = tree.getSelectionModel().getSelectedNode();
		var parentId ;
		if(node){
			parentId = node.id;
		}else{
			node = root;
			parentId = root.id;			
		}
		
		addWindow = new Ext.Window({
			title:"新增组织",
			width:200,
			height:100,
			autoScroll: true,
			modal: true,
			resizable: false,
			frame: true,
			items:[
			       {id:'field',text:"组织名称:",xtype:'label'},
			       {id:'orgName',name:'orgName',xtype:'textfield'}
			     ],
			buttons:[
			         {text:"确定", handler: function(){
			        	 var param={'parentId':parentId,'orgName':Ext.getCmp('orgName').getValue()};
			        	 doPost('addOrg',param);
			        	 refreshChildNode(node);
			        	 addWindow.close();
			        	 }
			         },
			         {text:"取消", handler: function(){addWindow.close();}}
			]
		});
		addWindow.show();
	}
	function refreshChildNode(node){
		var childrenNode = node.childNodes;
		var childNum = childrenNode.length;
		var mysetInterval = setInterval(function(){
			if(childNum >-1){
				node.removeChild(childrenNode[--childNum]);
			}else{
				clearInterval(mysetInterval);
			}
			
		},10);
		setTimeout(function(){
			var param = {'orgId':node.id};
			doPost("getChildrenOrg",param,function(childNodes){
				node.appendChild(eval("("+childNodes+")"));
				node.expand();
				Ext.MessageBox.alert('提示', '操作成功！');
			});
		}, 100);
		
	}
	function doPost(toUrl,paramJson,callback){
		Ext.Ajax.request({
	        url: toUrl,
	        params: paramJson,
	        method: 'post',
	        contentType:"application/x-www-form-urlencoded;charset=UTF-8", 
	        dataType: "json",
	        success: function (response) {
	        	if(callback && typeof(callback) == 'function'){
		        		callback(response.responseText);
	        	}
	        },
	        failure: function (response, options) {
	            Ext.MessageBox.alert('提示', '操作失败！');
	        }
		});
	}
</script>
</head>
<body>
<dir id="hello"></dir>
</body>
</html>